<template>
    <div class="mmv-container mmv-account-center__menu mmv-side-menu">
        <header class="mmv-side-menu__header">个人中心</header>
        <ul class="mmv-side-menu__list">
            <slot></slot>
        </ul>
        <ul class="mmv-side-menu__list" v-if="false">
            <li>
                <a class="mmv-side-menu__item nuxt-link-active" href>
                    <i class="mmv-icon iconfont icon-wodefatie"></i>
                    <span>我的发帖</span>
                </a>
            </li>
            <li>
                <a class="mmv-side-menu__item" href>
                    <i class="mmv-icon iconfont icon-huifu"></i>
                    <span>我的评论</span>
                </a>
            </li>
            <li>
                <a class="mmv-side-menu__item" href>
                    <i class="mmv-icon iconfont icon-wodeshoucang"></i>
                    <span>我的收藏</span>
                </a>
            </li>
            <li>
                <a class="mmv-side-menu__item" href>
                    <i class="mmv-icon iconfont icon-wodefensi"></i>
                    <span>我的粉丝</span>
                </a>
            </li>
            <li>
                <a class="mmv-side-menu__item" href>
                    <i class="mmv-icon iconfont icon-wodeguanzhu"></i>
                    <span>我的关注</span>
                </a>
            </li>
            <li>
                <a class="mmv-side-menu__item" href>
                    <i class="mmv-icon iconfont icon-dengji"></i>
                    <span>我的等级</span>
                </a>
            </li>
            <li>
                <a class="mmv-side-menu__item" href>
                    <i class="mmv-icon iconfont icon-mi-icon"></i>
                    <span>我的米游币</span>
                </a>
            </li>
            <li>
                <a class="mmv-side-menu__item" href>
                    <i class="mmv-icon iconfont icon-renzheng"></i>
                    <span>认证中心</span>
                </a>
            </li>
            <li>
                <a class="mmv-side-menu__item" href>
                    <i class="mmv-icon iconfont icon-yinsishezhi"></i>
                    <span>隐私设置</span>
                </a>
            </li>
            <li>
                <a class="mmv-side-menu__item" href>
                    <i class="mmv-icon iconfont icon-zhanghaoguanli"></i>
                    <span>编辑资料</span>
                </a>
            </li>
            <li>
                <a class="mmv-side-menu__item" href>
                    <i class="mmv-icon iconfont icon-tuichudenglu"></i>
                    <span>退出登录</span>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => [],
        },
    },
};
</script>

<style lang="less">
.mmv-side-menu {
    width: 280px;
    float: left;
}

.mmv-side-menu__header {
    width: 100%;
    padding: 0 30px;
    line-height: 50px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
}

.mmv-side-menu__list {
    padding: 0 30px 10px;
}

.mmv-side-menu__item {
    padding: 0 20px;
    line-height: 50px;
    font-size: 14px;
    color: #666;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.mmv-side-menu__item:hover {
    color: #00c3ff;
}

.mmv-side-menu__item:hover .mmv-icon {
    color: #00c3ff;
}

.mmv-side-menu__item .mmv-icon {
    font-size: 18px;
    vertical-align: top;
    display: inline-block;
    color: #d9d9d9;
    margin-right: 15px;
}

.mmv-side-menu__count {
    background-color: #ff667f;
    border-radius: 8px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    font-size: 12px;
    color: #fff;
    margin-left: 8px;
}

.mmv-side-menu .nuxt-link-active {
    color: #4cc3ff;
}

.mmv-side-menu .nuxt-link-active .mmv-icon {
    color: #4cc3ff;
}
</style>